<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tail log</title>
	<style type="text/css">
		a:link,a:visited{
			text-decoration:none;  /*超链接无下划线*/
		}
		a:hover{
			text-decoration:underline;  /*鼠标放上去有下划线*/
		}
	</style>
<script src="/static/js/jquery-1.10.1.min.js"></script>
</head>
<body>
	<div id="log-container" style="height: 800px; overflow-y: scroll; background: #333; color: #aaa; padding: 10px;">
		<div>
		</div>
	</div>
	<button onclick="closeWebSocket()">关闭WebSocket连接</button>
	<button onclick="openWebSocket()">刷新日志</button>
	<button ><a href="../index.html">返回首页</a></button>
</body>
<script>
        var websocket = null;
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window){
            websocket = new WebSocket('ws://47.98.242.212:49004/kohlerWxsLog');
            //websocket = new WebSocket('ws://localhost:8080/log');
        }else{
            alert('当前浏览器 Not support websocket')
        }
		websocket.onmessage = function(event) {
			// 接收服务端的实时日志并添加到HTML页面中
			$("#log-container div").append(event.data);
			// 滚动条滚动到最低部
			$("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());
		};

    //打开 WebSocket连接
    function openWebSocket() {
        window.location.reload();
    }

    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }
    //连接发生错误的回调方法
    websocket.onerror = function () {
        alert("WebSocket连接发生错误");
    };

    //连接成功建立的回调方法
    websocket.onopen = function () {
        alert("WebSocket连接成功");
    }

    //接收到消息的回调方法
  //  websocket.onmessage = function (event) {
    //    alert(event.data);
    //}

    //连接关闭的回调方法
    websocket.onclose = function () {
        alert("WebSocket连接关闭");
    }
</script>
</body>
</html>